<template>
  <div>
    <div v-if="treeItem.text" :style="indentVal">
      {{ treeItem.text }}
    </div>
    <template v-if="treeItem.children">
      <tree-item v-for="(child, index) in treeItem.children" :treeItem="child" :is-nest="true" :indentLevel="nextIndentLevel" :key="index" />
    </template>
  </div>
</template>

<script>

export default {
  // 递归组件里使用自己, 必须制定name属性
  name: 'tree-item',
  props: {
    // 一个节点
    treeItem: {
      type: Object,
      default: () => {}
    },
    // 标识是否是嵌套节点, 默认false
    isNest: {
      type: Boolean,
      default: false
    },
    indentLevel: {
      type: Number,
      default: 1
    },
    indentIncrement: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {

    }
  },
  computed: {
    variable() {
      return variable
    },
    nextIndentLevel() {
      return this.indentLevel + this.indentIncrement
    },
    indentVal() {
      return {
        marginLeft: this.nextIndentLevel * 50 + 'px'
      }
    },
  },
}
</script>
<style lang="scss" scoped>
  .show-indent {
    margin-left: 20px;
  }
</style>